<template>
    <div id="index" ref="appRef">
        <div class="bg">
            <dv-loading v-if="loading">Loading...</dv-loading>
            <div v-else class="host-body">
                <div class="d-flex jc-center">
                    <dv-decoration-10 class="dv-dec-10" />
                    <div class="d-flex jc-center">
                        <dv-decoration-8 class="dv-dec-8" :color="decorationColors" />
                        <div class="title">
                            <span class="title-text">{{ title }}</span>
                            <!-- <dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" /> -->
                        </div>
                        <dv-decoration-8 class="dv-dec-8" :reverse="true" :color="decorationColors" />
                    </div>
                    <dv-decoration-10 class="dv-dec-10-s" />
                </div>

                <!-- 第二行 -->
                <div class="d-flex jc-between px-2">
                    <div class="d-flex aside-width">
                        <div class="react-right bg-color-blue mr-3" @click="shou">
                            <span class="text fw-b">数据监控</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao">
                            <span class="text fw-b">政务办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao2">
                            <span class="text fw-b">事项办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao3">
                            <span class="text fw-b">诉求治理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao4">
                            <span class="text fw-b">调节分析</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao5">
                            <span class="text fw-b">新媒体监管</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao6">
                            <span class="text fw-b">新媒体监管11</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao7">
                            <span class="text fw-b">服务大厅</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao8">
                            <span class="text fw-b">服务办件</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao9">
                            <span class="text fw-b">交易政务</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao10">
                            <span class="text fw-b">服务办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao11">
                            <span class="text fw-b">督查考核</span>
                        </div>
                    </div>
                </div>

                <div class="body-box">

                    <!-- <router-view></router-view> -->
                    <!-- 第三行数据 -->
                    <div class="content-box">
                        <div class="left">
                            <div class="left-one">
                                <dv-border-box-8 style="padding: 20px;">
                                    <h4 style="color: white; margin-bottom: 15px;">信息公开发文统计</h4>

                                    <!-- 发文统计列表 - 两列布局 -->
                                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                                        <!-- 第一行：市政府办公厅 & 市发展和改革委员会 -->
                                        <div style="display: flex; height: 40px; border-radius: 4px; overflow: hidden;">
                                            <div
                                                style="flex: 1; background: #02374f; color: white; display: flex; align-items: center; padding: 0 12px; font-size: 14px;">
                                                市政府办公厅</div>
                                            <div
                                                style="width: 58px; background: #245b55; color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold;">
                                                9999</div>
                                        </div>

                                        <div style="display: flex; height: 40px; border-radius: 4px; overflow: hidden;">
                                            <div
                                                style="flex: 1; background: #02374f; color: white; display: flex; align-items: center; padding: 0 12px; font-size: 14px;">
                                                市发展和改革委员会</div>
                                            <div
                                                style="width: 58px; background: #245b55; color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold;">
                                                2999</div>
                                        </div>

                                        <!-- 第二行：市科学技术局 & 市监察局 -->
                                        <div style="display: flex; height: 40px; border-radius: 4px; overflow: hidden;">
                                            <div
                                                style="flex: 1; background: #02374f; color: white; display: flex; align-items: center; padding: 0 12px; font-size: 14px;">
                                                市科学技术局</div>
                                            <div
                                                style="width: 58px; background: #245b55; color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold;">
                                                3999</div>
                                        </div>

                                        <div style="display: flex; height: 40px; border-radius: 4px; overflow: hidden;">
                                            <div
                                                style="flex: 1; background: #02374f; color: white; display: flex; align-items: center; padding: 0 12px; font-size: 14px;">
                                                市监察局</div>
                                            <div
                                                style="width: 58px; background: #245b55; color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold;">
                                                4999</div>
                                        </div>

                                        <!-- 第三行：市劳动和社会保障局 & 市财政局 -->
                                        <div style="display: flex; height: 40px; border-radius: 4px; overflow: hidden;">
                                            <div
                                                style="flex: 1; background: #02374f; color: white; display: flex; align-items: center; padding: 0 12px; font-size: 14px;">
                                                市劳动和社会保障局</div>
                                            <div
                                                style="width: 58px; background: #245b55; color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold;">
                                                5999</div>
                                        </div>

                                        <div style="display: flex; height: 40px; border-radius: 4px; overflow: hidden;">
                                            <div
                                                style="flex: 1; background: #02374f; color: white; display: flex; align-items: center; padding: 0 12px; font-size: 14px;">
                                                市财政局</div>
                                            <div
                                                style="width: 58px; background: #245b55; color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold;">
                                                6999</div>
                                        </div>

                                        <!-- 第四行：市劳动和社会保障局 & 市城市管理行政执法局 -->
                                        <div style="display: flex; height: 40px; border-radius: 4px; overflow: hidden;">
                                            <div
                                                style="flex: 1; background: #02374f; color: white; display: flex; align-items: center; padding: 0 12px; font-size: 14px;">
                                                市劳动和社会保障局</div>
                                            <div
                                                style="width: 58px; background: #245b55; color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold;">
                                                7999</div>
                                        </div>

                                        <div style="display: flex; height: 40px; border-radius: 4px; overflow: hidden;">
                                            <div
                                                style="flex: 1; background: #02374f; color: white; display: flex; align-items: center; padding: 0 12px; font-size: 14px;">
                                                市城市管理行政执法局</div>
                                            <div
                                                style="width: 58px; background: #245b55; color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold;">
                                                8999</div>
                                        </div>
                                    </div>
                                </dv-border-box-8>
                            </div>
                            <div class="left-two">
                                <dv-border-box-8 style="width: 100%; height: 100%;">
                                    <div id="main" style="width: 100%; height: 100%;"></div>
                                </dv-border-box-8>
                            </div>
                            <div class="left-three">
                                <dv-border-box-8 style="padding: 20px; height: 100%;">
                                    <h4 style="color: white; margin-bottom: 15px;">超期未受理情况</h4>
                                    <div class="scroll-table-container">
                                        <div class="table-header">
                                            <div class="header-cell" style="flex: 1;">未受理内容</div>
                                            <div class="header-cell" style="flex: 1;">申请部门</div>
                                            <div class="header-cell" style="flex: 1;">处理状态</div>
                                            <div class="header-cell" style="flex: 1;">超期天数</div>
                                        </div>
                                        <div class="table-body" ref="tableBody">
                                            <div v-for="(row, index) in tableData" :key="index" class="table-row">
                                                <div class="table-cell" style="flex: 1;">{{ row[0] }}</div>
                                                <div class="table-cell" style="flex: 1;">{{ row[1] }}</div>
                                                <div class="table-cell" style="flex: 1;">{{ row[2] }}</div>
                                                <div class="table-cell" style="flex: 1;">{{ row[3] }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </dv-border-box-8>
                            </div>
                        </div>
                        <div class="center">
                            <div class="center-one">
                                <dv-border-box-8 style="padding: 20px; height: 100%;">
                                    <h2 style="color: white; margin-bottom: 30px;margin-top: 40px;text-align: center;">信息公开发文汇总</h2>
                                    <div style="display: flex; gap: 15px; margin-bottom: 60px; justify-content: center;">
                                        <!-- 6个动态数字模块 -->
                                        <div v-for="(item, index) in dynamicNumbers" :key="index" 
                                             style="width: 50px; height: 70px; background: #028fce; border-radius: 6px; padding: 15px; text-align: center; display: flex; align-items: center; justify-content: center;">
                                            <div style="color: #caf982; font-size: 35px; font-weight: bold;">{{ item.value }}</div>
                                        </div>
                                    </div>
                                    <div style="display: flex; gap: 20px; justify-content: center;">
                                        <!-- 3个统计模块 -->
                                        <dv-border-box-13 v-for="(stat, index) in statistics" :key="index" 
                                             style="width: 260px; height: 140px; background: #244c60; border-radius: 6px; padding: 15px; text-align: center; display: flex; flex-direction: column; justify-content: center;">
                                            <div style="color: white; font-size: 25px; margin-bottom: 20px;margin-right: 150px;">{{ stat.label }}</div>
                                            <div style="color: #32e8b3; font-size: 25px; font-weight: bold;">{{ stat.value }}</div>
                                        </dv-border-box-13>
                                    </div>
                                </dv-border-box-8>
                            </div>
                            <div class="center-two">
                                <div class="two-left">
                                    <dv-border-box-8 style="padding: 40px 10px; height: 100%; display: flex; flex-direction: column;">
                                        <h2 style="color: white; font-size: 20px; font-weight: bold; margin-bottom: 15px;">政务新媒体更新排行TOP5</h2>
                                        <div class="media-table" style="flex: 1; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden;">
                                            <!-- 表头 -->
                                            <div class="table-header" style="display: flex; background: #0c5171; color: white; font-weight: bold; border-radius: 4px 4px 0 0; flex-shrink: 0;">
                                                <div style="flex: 0.8; padding: 8px; text-align: center; font-size: 12px;">排名</div>
                                                <div style="flex: 1.5; padding: 8px; text-align: center; font-size: 12px;">名称</div>
                                                <div style="flex: 0.8; padding: 8px; text-align: center; font-size: 12px;">类型</div>
                                                <div style="flex: 1.2; padding: 8px; text-align: center; font-size: 12px;">更新时间</div>
                                            </div>
                                            <!-- 表格内容 -->
                                            <div class="table-body" style="background: #133241; flex: 1; display: flex; flex-direction: column; border-radius: 0 0 4px 4px; overflow: hidden;">
                                                <!-- 第1行 -->
                                                <div style="display: flex; border-bottom: 1px solid #1a4a5f; flex: 1;">
                                                    <div style="flex: 0.8; padding: 8px; text-align: center; color: white; display: flex; align-items: center; justify-content: center; font-size: 12px;">1</div>
                                                    <div style="flex: 1.5; padding: 8px; text-align: center; color: white; display: flex; align-items: center; justify-content: center; font-size: 12px;">新媒体名称A</div>
                                                    <div style="flex: 0.8; padding: 8px; text-align: center; color: white; display: flex; align-items: center; justify-content: center; font-size: 12px;">微博</div>
                                                    <div style="flex: 1.2; padding: 8px; text-align: center; color: white; display: flex; align-items: center; justify-content: center; font-size: 12px;">2023-12-12</div>
                                                </div>
                                                <!-- 第2行 -->
                                                <div style="display: flex; border-bottom: 1px solid #1a4a5f; flex: 1;">
                                                    <div style="flex: 0.8; padding: 8px; text-align: center; color: white; display: flex; align-items: center; justify-content: center; font-size: 12px;">2</div>
                                                    <div style="flex: 1.5; padding: 8px; text-align: center; color: white; display: flex; align-items: center; justify-content: center; font-size: 12px;">新媒体名称B</div>
                                                    <div style="flex: 0.8; padding: 8px; text-align: center; color: white; display: flex; align-items: center; justify-content: center; font-size: 12px;">微信</div>
                                                    <div style="flex: 1.2; padding: 8px; text-align: center; color: white; display: flex; align-items: center; justify-content: center; font-size: 12px;">2023-12-12</div>
                                                </div>
                                                <!-- 第3行 -->
                                                <div style="display: flex; border-bottom: 1px solid #1a4a5f; flex: 1;">
                                                    <div style="flex: 0.8; padding: 8px; text-align: center; color: white; display: flex; align-items: center; justify-content: center; font-size: 12px;">3</div>
                                                    <div style="flex: 1.5; padding: 8px; text-align: center; color: white; display: flex; align-items: center; justify-content: center; font-size: 12px;">新媒体名称C</div>
                                                    <div style="flex: 0.8; padding: 8px; text-align: center; color: white; display: flex; align-items: center; justify-content: center; font-size: 12px;">抖音</div>
                                                    <div style="flex: 1.2; padding: 8px; text-align: center; color: white; display: flex; align-items: center; justify-content: center; font-size: 12px;">2023-12-12</div>
                                                </div>
                                                <!-- 第4行 -->
                                                <div style="display: flex; border-bottom: 1px solid #1a4a5f; flex: 1;">
                                                    <div style="flex: 0.8; padding: 8px; text-align: center; color: white; display: flex; align-items: center; justify-content: center; font-size: 12px;">4</div>
                                                    <div style="flex: 1.5; padding: 8px; text-align: center; color: white; display: flex; align-items: center; justify-content: center; font-size: 12px;">新媒体名称D</div>
                                                    <div style="flex: 0.8; padding: 8px; text-align: center; color: white; display: flex; align-items: center; justify-content: center; font-size: 12px;">微信</div>
                                                    <div style="flex: 1.2; padding: 8px; text-align: center; color: white; display: flex; align-items: center; justify-content: center; font-size: 12px;">2023-12-12</div>
                                                </div>
                                                <!-- 第5行 -->
                                                <div style="display: flex; flex: 1;">
                                                    <div style="flex: 0.8; padding: 8px; text-align: center; color: white; display: flex; align-items: center; justify-content: center; font-size: 12px;">5</div>
                                                    <div style="flex: 1.5; padding: 8px; text-align: center; color: white; display: flex; align-items: center; justify-content: center; font-size: 12px;">新媒体名称E</div>
                                                    <div style="flex: 0.8; padding: 8px; text-align: center; color: white; display: flex; align-items: center; justify-content: center; font-size: 12px;">微博</div>
                                                    <div style="flex: 1.2; padding: 8px; text-align: center; color: white; display: flex; align-items: center; justify-content: center; font-size: 12px;">2023-12-12</div>
                                                </div>
                                            </div>
                                        </div>
                                    </dv-border-box-8>
                                </div>
                                <div class="two-right">
                                    <dv-border-box-8 style="padding: 5px; height: 100%; display: flex; flex-direction: column;">
                                        <div id="media-chart" style="flex: 1; width: 100%; height: 100%; min-height: 0;"></div>
                                    </dv-border-box-8>
                                </div>
                            </div>
                        </div>
                        <div class="right">
                            <SixRight/>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { moduleInfo, subtitle, title, WEEK } from '@/constant/index'
import { formatTime } from '@/utils/index'
import useDraw from '@/utils/useDraw'
import * as echarts from 'echarts'
import {
    defineComponent,
    onMounted,
    onUnmounted,
    reactive,
    ref,
} from 'vue'
import { useRouter } from 'vue-router'
import SixRight from '../six/SixRight.vue'

export default defineComponent({

    components: {
        SixRight
    },
    setup() {
        // * tab切换 颜色背景改变
        const lastChar = location.href.substr(location.href.length - 1)
        const tabColor = ref(lastChar)
        // * 颜色
        const decorationColors = ['#568aea', '#000000']
        // * 加载标识
        const loading = ref<boolean>(true)
        // * 时间内容
        const timeInfo = reactive({
            setInterval: 0,
            dateDay: '',
            dateYear: '',
            dateWeek: ''
        })

        const router = useRouter()
        //路由跳转
        const shou = () => {
            router.push("/")
            console.log("跳转成功");
        }

        const tiao = () => {
            router.push("/wzh2")
            console.log("跳转成功");
        }

        const tiao2 = () => {
            router.push("/wzh3")
        }

        const tiao3 = () => {
            router.push("/sjk")
        }

        const tiao4 = () => {
            router.push("/sjk1")
        }
        const tiao5 = () => {
            router.push("/sjk2")
        }
        const tiao6 = () => {
            router.push("/mhr1")
        }
        const tiao7 = () => {
            router.push("/mhr2")
        }
        const tiao8 = () => {
            router.push("/mhr3")
        }
        const tiao9 = () => {
            router.push("/st1")
        }
        const tiao10 = () => {
            router.push("/st2")
        }
        const tiao11 = () => {
            router.push("/st3")
        }

        // 轮播表数据
        const tableData = ref([
            ['未受理内容1', '申请部门1', '处理状态1', '超期天数1'],
            ['未受理内容2', '申请部门2', '处理状态2', '超期天数2'],
            ['未受理内容3', '申请部门3', '处理状态3', '超期天数3'],
            ['未受理内容4', '申请部门4', '处理状态4', '超期天数4'],
            ['未受理内容5', '申请部门5', '处理状态5', '超期天数5'],
            ['未受理内容6', '申请部门6', '处理状态6', '超期天数6'],
            ['未受理内容7', '申请部门7', '处理状态7', '超期天数7'],
            ['未受理内容8', '申请部门8', '处理状态8', '超期天数8'],
            ['未受理内容9', '申请部门9', '处理状态9', '超期天数9']
        ])

        const currentRow = ref(0)
        const scrollInterval = ref<number | null>(null)

        // 信息公开发文汇总数据
        const dynamicNumbers = ref([
            { label: '发文总数', value: 1 },
            { label: '今日发文', value: 0 },
            { label: '本周发文', value: 0 },
            { label: '本月发文', value: 0 },
            { label: '本季发文', value: 0 },
            { label: '本年发文', value: 0 }
        ])

        const statistics = ref([
            { label: '本月', value: 1234 },
            { label: '本季', value: 123456 },
            { label: '本年', value: 1234567 }
        ])

        // 动态数字递增函数 - 按照十进制加法递增
        const startDynamicNumbers = () => {
            return setInterval(() => {
                // 从最后一位开始加1
                let carry = 1 // 进位标志
                for (let i = 5; i >= 0; i--) {
                    const currentValue = dynamicNumbers.value[i].value
                    const newValue = currentValue + carry
                    
                    if (newValue <= 9) {
                        dynamicNumbers.value[i].value = newValue
                        carry = 0 // 没有进位
                        break
                    } else {
                        dynamicNumbers.value[i].value = 0 // 当前位归零
                        carry = 1 // 继续进位
                    }
                }
                
                // 如果还有进位（说明是999999+1=1000000），重置为100000
                if (carry === 1) {
                    dynamicNumbers.value[0].value = 1
                    dynamicNumbers.value[1].value = 0
                    dynamicNumbers.value[2].value = 0
                    dynamicNumbers.value[3].value = 0
                    dynamicNumbers.value[4].value = 0
                    dynamicNumbers.value[5].value = 0
                }
            }, 2000) // 每2秒递增1
        }

        // 轮播表滚动函数 - 由下往上滚动
        const startTableScroll = () => {
            scrollInterval.value = setInterval(() => {
                const tableBody = document.querySelector('.table-body')
                if (tableBody) {
                    // 获取当前滚动位置
                    const currentScrollTop = tableBody.scrollTop
                    const rowHeight = 40 // 每行高度
                    const visibleRows = 5 // 可见行数

                    // 计算总滚动高度和最大可滚动高度
                    const totalScrollHeight = tableData.value.length * rowHeight
                    const maxScrollTop = Math.max(0, totalScrollHeight - visibleRows * rowHeight)

                    // 如果已经滚动到底部或超过底部，回到顶部
                    if (currentScrollTop >= maxScrollTop) {
                        tableBody.scrollTop = 0
                    } else {
                        // 否则向上滚动一行
                        tableBody.scrollTop += rowHeight
                    }
                }
            }, 1000) // 每1秒滚动一次
        }

        // 停止轮播
        const stopTableScroll = () => {
            if (scrollInterval.value) {
                clearInterval(scrollInterval.value)
                scrollInterval.value = null
            }
        }


        // * 适配处理
        const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()

        //left2
        // 定义处理左侧第二个图表的函数
        const handlelefttwo = () => {
            // 获取图表容器DOM元素（假设页面中有id为'main'的元素作为图表容器）
            var chartDom = document.getElementById('main');
            // 初始化ECharts实例，将图表挂载到指定DOM元素上
            var myChart = echarts.init(chartDom);
            // 声明图表配置项变量
            var option;

            // 图表具体配置项
            option = {
                // 标题配置
                title: {
                    text: '信息公开发文排行TOP7', // 标题文字内容
                    textStyle: {
                        color: '#fff', // 标题文字颜色（白色）
                        fontSize: 25, // 标题文字大小
                        fontWeight: 'bold' // 标题文字加粗
                    },
                    top: 30, // 标题距离容器顶部的距离
                    left: 0 // 标题距离容器左侧的距离
                },
                // 提示框配置（鼠标悬停时显示的信息）
                tooltip: {
                    trigger: 'axis', // 触发方式：坐标轴触发
                    axisPointer: {
                        type: 'shadow' // 坐标轴指示器类型：阴影（适用于柱状图）
                    },
                    backgroundColor: 'rgba(0, 0, 0, 0.8)', // 提示框背景色（黑色半透明）
                    textStyle: {
                        color: '#fff' // 提示框文字颜色（白色）
                    }
                },
                // 网格配置（图表内容区域与容器的边距）
                grid: {
                    left: '3%', // 网格距离容器左侧的距离
                    right: '4%', // 网格距离容器右侧的距离
                    bottom: '3%', // 网格距离容器底部的距离
                    top: '20%', // 网格距离容器顶部的距离（预留标题空间）
                    containLabel: true // 网格是否包含坐标轴标签
                },
                // X轴配置（横向坐标轴）
                xAxis: {
                    type: 'value', // 轴类型：数值轴
                    axisLine: {
                        lineStyle: {
                            color: '#fff' // 坐标轴轴线颜色（白色）
                        }
                    },
                    axisLabel: {
                        color: '#fff', // 坐标轴刻度标签颜色（白色）
                        fontSize: 15 // 刻度标签文字大小
                    },
                    splitLine: {
                        // 网格分割线配置
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.2)', // 分割线颜色（白色半透明）
                            type: 'dashed' // 分割线样式（虚线）
                        }
                    },
                    data: [0, 2000, 4000, 6000, 8000, 10000] // X轴刻度数据
                },
                // Y轴配置（纵向坐标轴）
                yAxis: {
                    type: 'category', // 轴类型：类目轴（用于显示文本类别）
                    // Y轴类目数据（从上到下依次显示的单位名称）
                    data: [
                        '市发展和改革委员会',
                        '市科学技术局',
                        '市监察局',
                        '市劳动和社会保障局',
                        '市财政局',
                        '市城市管理行政执法局',
                        '市政府办公厅'
                    ],
                    axisLine: {
                        lineStyle: {
                            color: '#fff' // Y轴轴线颜色（白色）
                        }
                    },
                    axisLabel: {
                        color: '#fff', // Y轴刻度标签颜色（白色）
                        fontSize: 15 // 刻度标签文字大小
                    }
                },
                // 系列数据配置（图表展示的数据系列）
                series: [
                    {
                        name: '发文数量', // 系列名称（用于提示框显示）
                        type: 'bar', // 图表类型：柱状图
                        // 系列数据（与Y轴类目一一对应，从上到下的数值）
                        data: [5000, 5911, 6780, 7200, 8000, 8900, 9810],
                        itemStyle: {
                            // 柱状图颜色配置（横向渐变）
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 1, 0, // 渐变方向：从左到右
                                [
                                    { offset: 0, color: '#00bfbf' }, // 渐变起始色（青色）
                                    { offset: 1, color: '#49b943' }  // 渐变结束色（绿色）
                                ]
                            )
                        },
                        barWidth: '50%', // 柱子宽度（占类目宽度的百分比）
                        label: {
                            show: true, // 是否显示标签（柱子上的数值）
                            position: 'insideRight', // 标签位置：柱子内部右侧
                            color: '#fff', // 标签文字颜色（白色）
                            fontSize: 15, // 标签文字大小
                            fontWeight: 'bold' // 文字加粗
                        }
                    }
                ],
                backgroundColor: 'rgba(0, 0, 0, 0)' // 图表背景色（全透明）
            };

            // 如果配置项存在，则将配置应用到图表
            option && myChart.setOption(option);
        }
        //center-two
        // 政务新媒体年度问题汇总柱状图
const handleMediaChart = () => {
    // 获取图表容器DOM元素，ID为'media-chart'
    const chartDom = document.getElementById('media-chart')
    // 如果容器不存在则直接返回，避免后续错误
    if (!chartDom) return
    
    // 初始化echarts实例，绑定到获取到的DOM元素上
    const myChart = echarts.init(chartDom)
    
    // 图表配置项
    const option = {
        // 图表标题配置
        title: {
            text: '政务新媒体年度问题汇总', // 标题文本内容
            textStyle: {
                color: '#fff', // 标题文字颜色：白色
                fontSize: 25, // 标题文字大小：25px
                fontWeight: 'bold' // 标题文字粗细：粗体
            },
            top: 20, // 标题距离顶部的距离：20px
            left: 'center', // 标题水平居中显示
            itemGap: 30 // 标题与副标题之间的间距：30px（当前无副标题，预留配置）
        },
        // 提示框配置（鼠标悬停时显示的信息）
        tooltip: {
            trigger: 'axis', // 触发类型：坐标轴触发（针对柱状图、折线图等）
            axisPointer: {
                type: 'shadow' // 坐标轴指示器类型：阴影（适合柱状图）
            },
            backgroundColor: 'rgba(0, 0, 0, 0.8)', // 提示框背景色：黑色半透明
            textStyle: {
                color: '#fff' // 提示框文字颜色：白色
            }
        },
        // 网格配置（图表内容区域与容器的边距）
        grid: {
            left: '5%', // 左内边距：5%
            right: '3%', // 右内边距：3%
            bottom: '0', // 下内边距：10%
            top: '20%', // 上内边距：15%
            containLabel: true // 网格是否包含坐标轴的刻度标签
        },
        // X轴配置
        xAxis: {
            type: 'category', // 轴类型：类目轴（用于离散数据，如月份）
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], // X轴数据：1-12月
            axisLine: {
                lineStyle: {
                    color: '#fff' // 坐标轴轴线颜色：白色
                }
            },
            axisLabel: {
                color: '#fff', // 坐标轴刻度标签颜色：白色
                fontSize: 12, // 刻度标签字体大小：12px
                interval: 0 // 刻度标签间隔：0表示显示所有标签（不间隔隐藏）
            }
        },
        // Y轴配置
        yAxis: {
            type: 'value', // 轴类型：数值轴（用于连续数据，如数量）
            min: 0, // 坐标轴最小值：0
            max: 5000, // 坐标轴最大值：5000
            interval: 1000, // 坐标轴刻度间隔：1000
            axisLine: {
                lineStyle: {
                    color: '#fff' // 坐标轴轴线颜色：白色
                }
            },
            axisLabel: {
                color: '#fff', // 刻度标签颜色：白色
                fontSize: 12, // 刻度标签字体大小：12px
                formatter: function(value) {
                    return value // 刻度标签格式化函数：直接返回数值（默认格式）
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.2)', // 网格线颜色：白色半透明（20%透明度）
                    type: 'dashed' // 网格线类型：虚线
                }
            }
        },
        // 系列数据配置（图表展示的数据系列）
        series: [{
            name: '问题数量', // 系列名称（用于提示框等）
            type: 'bar', // 图表类型：柱状图
            data: [3200, 2800, 3500, 4200, 3800, 4500, 4800, 3900, 4200, 3800, 3500, 3000], // 具体数据（对应1-12月的问题数量）
            itemStyle: {
                // 柱状图颜色：垂直方向的渐变色
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1, // 渐变方向：从顶部(0,0)到底部(0,1)
                    [
                        { offset: 0, color: '#00bfbf' }, // 渐变起点（0%位置）颜色：青色
                        { offset: 1, color: '#49b943' }  // 渐变终点（100%位置）颜色：绿色
                    ]
                )
            },
            barWidth: '60%', // 柱子宽度：占类目宽度的60%
            label: {
                show: true, // 是否显示标签（柱子顶部的数值）
                position: 'top', // 标签位置：顶部
                color: '#fff', // 标签颜色：白色
                fontSize: 12, // 标签字体大小：12px
                fontWeight: 'bold' // 标签字体粗细：粗体
            }
        }],
        backgroundColor: 'rgba(0, 0, 0, 0)' // 图表背景色：完全透明（0透明度黑色）
    }
    
    // 将配置项设置到图表实例，渲染图表
    myChart.setOption(option)
    
    // 监听窗口大小变化事件，实现图表响应式调整
    window.addEventListener('resize', function() {
        myChart.resize() // 调用echarts的resize方法，重新计算图表尺寸
    })
}
        // 生命周期
        onMounted(() => {
            // 图表初始化定时器
            const chartInterval = setInterval(() => {
                handlelefttwo()
                handleMediaChart()
            }, 500)
            
            cancelLoading()
            handleTime()
            // todo 屏幕适应
            windowDraw()
            calcRate()
            // 启动轮播表
            startTableScroll()
            // 启动动态数字递增
            const dynamicInterval = startDynamicNumbers()
            
            // 清理定时器
            onUnmounted(() => {
                clearInterval(chartInterval)
                clearInterval(dynamicInterval)
            })
        })

        onUnmounted(() => {
            unWindowDraw()
            clearInterval(timeInfo.setInterval)
        })

        //点击颜色切换  路由跳转
        const tab = (index) => {
            // console.log(index)
            tabColor.value = index
            router.push(`/tab${index}`)
        }

        // methods
        // todo 处理 loading 展示
        const cancelLoading = () => {
            setTimeout(() => {
                loading.value = false
            }, 500)
        }

        // todo 处理时间监听
        const handleTime = () => {
            timeInfo.setInterval = setInterval(() => {
                const date = new Date()
                timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
                timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
                timeInfo.dateWeek = WEEK[date.getDay()]
            }, 1000)
        }

        // return
        return {
            loading,
            timeInfo,
            appRef,
            title,
            subtitle,
            moduleInfo,
            tabColor,
            tab,
            tiao,
            tiao2,
            shou,
            tiao3,
            tiao4,
            tiao5,
            tiao6,
            tiao7,
            tiao8,
            tiao9,
            tiao10,
            tiao11,
            tableData,
            currentRow,
            dynamicNumbers,
            statistics
        }
    }
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/index.scss';

.content-box {
    width: 100%;
    height: 100vh;
    display: flex;
    flex: 1;
}

.left {
    width: 500px;
    height: 100%;

    // border: 1px solid red;
    .left-one {
        width: 100%;
        height: 250px;
    }

    .left-two {
        width: 100%;
        height: 450px;
    }

    .left-three {
        width: 100%;
        height: 240px;
    }
}

.center {
    width: 850px;
    height: 100%;

    .center-one {
        width: 100%;
        height: 530px;
        // background: red;
    }

    .center-two {
        width: 100%;
        height: 410px;
        // background: #000;
        display: flex;
        .two-left{
            width: 50%;
            height: 410px;
            // background: #000;
        }
        .two-right{
            width: 50%;
            height: 410px;
            // background: red;
        }
    }
}

.right {
    width: 500px;
    height: 100%;
    // border: 1px solid black;
    padding: 0;
    margin: 0;
}

/* 轮播表样式 */
.scroll-table-container {
    height: calc(100% - 50px);
    overflow: hidden;
    position: relative;
}

.table-header {
    display: flex;
    background: linear-gradient(90deg, #02374f, #245b55);
    color: white;
    font-weight: bold;
    border-radius: 4px 4px 0 0;
    margin-bottom: 5px;
}

.header-cell {
    padding: 5px 8px;
    text-align: center;
    font-size: 14px;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.header-cell:last-child {
    border-right: none;
}

.table-body {
    height: 200px;
    /* 固定高度，显示5行数据 */
    overflow-y: hidden;
    overflow-x: hidden;
    position: relative;
    scroll-behavior: smooth;
}

.table-row {
    display: flex;
    background: rgba(2, 55, 79, 0.7);
    margin-bottom: 3px;
    border-radius: 3px;
    height: 40px;
    /* 固定行高 */
    align-items: center;
}

.table-cell {
    padding: 10px 8px;
    text-align: center;
    color: white;
    font-size: 13px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.table-cell:last-child {
    border-right: none;
}

/* 隐藏滚动条 */
.table-body::-webkit-scrollbar {
    display: none;
}

.table-body {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
</style>
